<template>
  <div>
    <el-breadcrumb class="breadcrumb-row" separator-class="el-icon-arrow-right">

      <el-breadcrumb-item>借阅管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户数据统计</el-breadcrumb-item>
    </el-breadcrumb>


    <el-card>
      <el-row type="flex" justify="space-around" style="align-items: center">
        <el-tabs v-model="activeTab" @click.native="handleTabClick()">
          <el-tab-pane label="今日图书借阅量统计">

          </el-tab-pane>
          <el-tab-pane label="本周图书借阅量统计">

          </el-tab-pane>
          <el-tab-pane label="今日个人借阅量统计">

          </el-tab-pane>
          <el-tab-pane label="本周个人借阅量统计">

          </el-tab-pane>
        </el-tabs>

      </el-row>
      <el-row>

        <div v-show="rowData.length > 0" id="main" class="echar-row" style="width: 1000px; height: 600px">

        </div>
        <div v-show="rowData.length === 0">
          暂无数据
        </div>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import echarts from 'echarts'
import { DataCount, ranking, rankingPeasonByOneDay, rankingPeason } from '@/request'

export default {
  mounted() {
    this.request()

  },
  data() {
    return {
      activeTab: '0',
      rowData: [], // 用于保存书籍名称
      colData: [], // 用于保存书籍借阅次数
      data:[],
    }
  },
  methods: {
    handleTabClick() {
      
      // 根据点击的标签页，调用不同的接口获取数据
      this.initChart()
    },
    async request() {
      try {
        // 从 DataCount 接口获取数据
        const response = await DataCount()
        console.log('DataCount 返回的数据:', response) // 输出返回的数据
        const response2 = await ranking()
        const response3 = await rankingPeasonByOneDay()
        const response4 = await rankingPeason()
        this.data[0] = response.data
        this.data[1] = response2.data
        this.data[2] = response3.data
        this.data[3] = response4.data
        console.log('data:', this.data) // 输出 data 数组
        // 确保返回的数据格式正确
        if (response && Array.isArray(response.data)) {
          // 处理数据，将书名和借阅量分别提取到 rowData 和 colData 数组
          this.rowData = response.data.map(item => item.bookName)
          this.colData = response.data.map(item => item.borrowCount)

          console.log('rowData:', this.bookNames) // 输出提取的书名
          console.log('colData:', this.colData) // 输出提取的借阅量

          // 在数据获取完后初始化图表
          this.initChart()
        } else {
          console.error('返回的数据格式不正确，期望一个对象包含数组', response)
        }
      } catch (error) {
        console.error('获取数据失败:', error)
      }
    },
    initChart() {
      if(this.data.length > 0){
        if(this.activeTab === '0'|| this.activeTab === '1'){
          this.rowData = this.data[this.activeTab].map(item => item.bookName)
          this.colData = this.data[this.activeTab].map(item => item.borrowCount)
        }else{
          this.rowData = this.data[this.activeTab].map(item => item.username)
          this.colData = this.data[this.activeTab].map(item => item.borrowCount)
        }
        
      }

      // 检查 rowData 和 colData 是否为空，防止图表渲染错误
      if (this.rowData.length && this.colData.length) {
        // 获取到 DOM 元素后初始化 ECharts 实例
        const myChart = echarts.init(document.getElementById('main'))

        // 配置图表
        const option = {
          title: {
            text: '图书借阅排行榜',
            left: '10%'
          },
          tooltip: {},
          legend: {
            data: [
              {
                name: '借阅量',
                icon: 'circle'
              }
            ],
            itemWidth: 15
          },
          toolbox: {
            feature: {
              magicType: {
                // 可切换图表类型
                type: ['line', 'bar']
              }
            }
          },
          xAxis: {
            data: this.rowData // x轴使用书名
          },
          yAxis: {},
          series: [
            {
              type: 'bar',
              name: '借阅量',
              data: this.colData, // y轴使用借阅量
              markPoint: {
                data: [
                  {
                    type: 'max',
                    name: '最大值'
                  },
                  {
                    type: 'min',
                    name: '最小值'
                  }
                ]
              },
              markLine: {
                data: [
                  {
                    type: 'average',
                    name: '平均值'
                  }
                ]
              },
              label: {
                show: true,
                rotate: 60,
                position: 'top'
              }
            }
          ]
        }

        // 使用指定的配置项和数据显示图表
        myChart.setOption(option)
      } else {
        console.error('书名或借阅量数据为空，无法渲染图表')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.echar-row {
  margin: 0 auto;
}
</style>
